<template>
  <!-- 退卡页面 -->
  <div class="Membership card">
    <div class="header">
      <div class="header-1">
        <div class="header-1-1">
          <div class="tou"></div>
          <span>选择会员卡</span>
        </div>

      </div>
      <div class="header-2">
        <div class="header-2-1">
          <div class="img"></div>
          <div class="wenzi">
            <span>黑金会员·健身卡</span><br />
            <span>111111111</span><br />
            <span>有效期：<span>2022-03-22</span></span><br />
            <span style="color:#FF0000;">距到期：<span>36天</span></span>
          </div>
        </div>
        <div class="header-2-2">
          <div class="img"></div>
          <div class="wenzi">
            <span>黑金会员·健身卡</span><br />
            <span>111111111</span><br />
            <span>有效期：<span>2022-03-22</span></span><br />
            <span>距到期：<span>36天</span></span>
          </div>
        </div>
      </div>
      <!-- <div class="dashed"></div> -->
      <!-- 虚线 -->
      <hr size=1 style="color: #00000;border-style:dotted;width:95%">
      <div class="centre-1">
        <div class="tou"></div>
        <span>会员信息</span>
      </div>
      <br />
      <div class="centre-2">
        <!-- 上 -->
        <div class="centre-2-1">
          <div class="centre-4">
            <div class="centre-5">
              <span class="centre-5-1">会员姓名:<span class="centre-5-2">何新彦</span></span>
              <span class="centre-5-1">会员卡号: <span class="centre-5-2">22222222222</span></span>
              <span class="centre-5-1">开卡时间:<span class="centre-5-2">2022-03-22</span></span>
            </div>
            <div class="centre-5">
              <span class="centre-5-1">售卡部门:<span class="centre-5-2">电子商务部</span></span>
              <span class="centre-5-1">售卡员:<span class="centre-5-2">何新彦</span></span>
              <span class="centre-5-1">保险是否开启:<span class="centre-5-2">否</span></span>
            </div>
          </div>
          <br />
          <div class="centre-2-3">
            <div class="tou"></div>
            应扣费用
          </div>
          <!-- 下 -->
          <div class="centre-2-4">
            <div class="centre-6">
              <el-form class="centre-6-1" ref="form" :model="sizeForm" label-width="110px" size="mini" id="selectForm">
                <el-form-item label="开卡金额">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="扣会员保费">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="折旧费">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>

                <el-form-item label="扣plus抵扣额" style="">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="扣礼品卷抵扣额">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="扣回赠机票款">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>

                <el-form-item label="促销活动费用">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="员工承担费用">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="扣体验非">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>

                <el-form-item label="应退金额">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="合作厅使用次数">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="扣挂号费">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>

                <el-form-item label="贵宾厅使用次数">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>
                <el-form-item label="案件使用次数">
                  <el-input style="width:68px;" v-model="sizeForm.name"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="centre-2-2">
          <div class="img-1"></div>
          <div class="img-1-1">
            <span> 黑金会员·出行卡</span><br />
            <span> 续费年限2年</span>
          </div>
          <!-- 黑金会员出行卡 -->
          <div>
            <div class="img-1-2"></div>
            <div class="img-1-3">
              <div><span>订单金额:</span><span class="img-1-4">￥2000</span></div>
              <div><span>积分抵现:</span><span class="img-1-4">-￥200</span></div>
              <div><span>金币:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="img-1-4">-￥200</span></div>
              <div><span>折扣卷:&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="img-1-4">-￥200</span></div>
              <div><span>礼金卷:&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="img-1-4">-￥200</span></div>
            </div>
            <div class="img-1-2"></div>
            <div class="img-1-5">
              <span>￥1999</span>
              <span>续费合计:</span>
            </div>
          </div>
        </div>
      </div>
      <div class="refund">
        <div class="tou"></div>
        <span>退款方式</span>
      </div>
      <div class="refund-1">
        <div class="refund-2">
          <div class="refund-2-1">
            <span>退款方式</span>
            <template>
              <el-radio-group v-model="radio">
                <el-radio :label="3">原路退回</el-radio>
                <el-radio :label="6">退预留款</el-radio>
                <el-radio :label="9">退银行卡</el-radio>
              </el-radio-group>
            </template>
          </div>
          <div class="refund-3">
            <el-form class="refund-3-1" ref="form" :model="sizeForm" label-width="80px" size="mini">
              <el-form-item label="开户行" style="width:200px;">
                <el-select clearable v-model="sizeForm.region" placeholder="请输入">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="户名">
                <el-input style="width:100px;" v-model="sizeForm.name"></el-input>
              </el-form-item>
              <el-form-item label="卡号">
                <el-input style="width:100px;" v-model="sizeForm.name"></el-input>
              </el-form-item>
              <el-form-item label="开户地">
                <el-input style="width:600px;" v-model="sizeForm.name"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="refund-4">
            <div class="refund-4-1">退款原因</div>
            <div class="refund-4-2">
              <el-checkbox v-model="checked">澳大利亚男子接触1000多人后感觉不舒服，去医院一查感染了新冠病毒</el-checkbox><br>
              <el-checkbox v-model="checked">澳大利亚男子接触1000多人后感觉不舒服，去医院一查感染了新冠病毒</el-checkbox><br>
              <el-checkbox v-model="checked">澳大利亚男子接触1000多人后感觉不舒服，去医院一查感染了新冠病毒</el-checkbox><br>
              <el-checkbox v-model="checked">澳大利亚男子接触1000多人后感觉不舒服，去医院一查感染了新冠病毒</el-checkbox><br>
              <el-checkbox v-model="checked">澳大利亚男子接触1000多人后感觉不舒服，去医院一查感染了新冠病毒</el-checkbox><br>
              <el-checkbox v-model="checked">澳大利亚男子接触1000多人后感觉不舒服，去医院一查感染了新冠病毒</el-checkbox><br>
              <el-checkbox v-model="checked">澳大利亚男子接触1000多人后感觉不舒服，去医院一查感染了新冠病毒</el-checkbox><br>
              <el-checkbox v-model="checked">澳大利亚男子接触1000多人后感觉不舒服，去医院一查感染了新冠病毒</el-checkbox>
            </div>
          </div>
          <div class="refund-5">
            <div class="refund-5-1">其他退款原因</div>
            <el-input style="width:600px" v-model="input" placeholder=""></el-input>
          </div>
        </div>
        <div>
          <div class="refund-6">
            <el-radio v-model="radio" label="1"><span style="font-weight: bolder"> 协议确认：</span> <a href="" class="gongsi">《公司渎失职管理规范》</a><span>是你提供给消费者的承诺，勾选后即表示同意协议中的所有条款。</span></el-radio>
          </div>
          <div class="refund-7">
            <el-row>
              <el-button type="warning">立即购买&nbsp;></el-button>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Membership card",
  data () {
    return {
      labelPosition: "right",
      formLabelAlign: {
        name: "",
      },
      radio: 3,
      checked: true,
      sizeForm: {
        name: '',
        region: '',
      }
    };
  },
  methods: {
    onSubmit () {
      console.log("submit!");
    },
  },
};
</script>
<style scoped>
.header {
  width: 800px;
  margin: auto;
  background-color: #ffffff;
}
.header-1 {
  text-align: left;
  margin-left: 20px;
  padding-top: 20px;
}
.tou {
  width: 3.5px;
  height: 17px;
  background-color: #4b71bf;
  margin-top: 2px;
  margin-right: 2px;
}
.header-1-1 {
  width: 100px;
  height: 40px;
  /* background-color: #f06f2d; */
  font-weight: bolder;
  display: flex;
}
.header-2 {
  text-align: left;
  margin-left: 20px;
  display: flex;
  margin-bottom: 15px;
}
.header-2-1 {
  width: 262px;
  height: 88px;
  margin-right: 20px;
  display: flex;
  border: 2px solid #2f80ed;
}
.header-2-2 {
  width: 262px;
  height: 88px;
  border: 2px solid #000000;
  display: flex;
}

.wenzi {
  /* width: 91px; */
  font-size: 10px;
  margin-left: 10px;
  margin-top: 8px;
}
.centre-1 {
  display: flex;
  margin-left: 20px;
  margin-top: 15px;
  font-weight: bolder;
}
.centre-2 {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
}
.centre-2-1 {
  width: 568px;
  height: 76px;
  background-color: #f7f6f9;
}
.centre-2-2 {
  width: 188px;
  height: 355px;
  background-color: #f7f6f9;
  margin-left: 10px;
}

/* 应扣费用 */
.centre-2-3 {
  margin-bottom: 20px;
  font-weight: bolder;
  margin-top: 10px;
  display: flex;
}

.centre-2-4 {
  width: 568px;
  height: 240px;
  background-color: #f7f6f9;
}

.centre-6-1 {
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  /* margin-top: 20px; */
  padding-top: 10px;
}
.centre-5 {
  margin-left: 40px;
  margin-top: 15px;
  font-size: 11px;
}
#selectForm >>> .el-form-item__label {
  font-size: 11px;
}
.centre-5-1 {
  margin-right: 45px;
}
.centre-5-2 {
  margin-left: 10px;
}
.refund {
  margin-left: 20px;
  margin-bottom: 15px;
}
.img {
  width: 120px;
  height: 72px;
  background-color: #000000;
  margin-top: 8px;
  margin-left: 8px;
}
.img-1 {
  width: 164px;
  height: 98px;
  background-color: #000000;
  margin: auto;
  margin-top: 10px;
}
.img-1-1 {
  margin-left: 12px;
  margin-top: 5px;
}
.img-1-1 :nth-of-type(1) {
  font-size: 12px;
  font-weight: bolder;
}
.img-1-1 :nth-of-type(2) {
  font-size: 8px;
}
.img-1-2 {
  width: 88%;
  height: 1px;
  border-top: 1px solid #e0e0e0;
  margin: auto;
  margin-top: 3px;
  margin-bottom: 3px;
}
.img-1-3 {
  font-size: 8px;
  margin-left: 12px;
  line-height: 25px;
}
.img-1-4 {
  font-weight: bolder;
  margin-left: 70px;
}
.img-1-5 {
  display: flex;
  flex-direction: row-reverse;
  margin-right: 12px;
  margin-top: 20px;
}
.img-1-5 :nth-of-type(1) {
  font-size: 20px;
  color: #f06f2d;
  font-weight: bolder;
}
.img-1-5 :nth-of-type(2) {
  margin-top: 8px;
  font-size: 8px;
  text-decoration: underline;
}
/* 退款方式 */
.refund {
  font-weight: bolder;
  margin-top: 35px;
  margin-bottom: 20px;
  display: flex;
}
.refund-2 {
  width: 750px;
  background-color: #f7f6f9;
  margin-left: 20px;
}
.refund-3-1 {
  display: flex;
  flex-wrap: wrap;
}
.refund-2-1 {
  margin-left: 25px;
  margin-top: 15px;
  font-size: 11px;
  margin-bottom: 10px;
  padding-top: 20px;
}
.refund-2-1 span {
  margin-right: 18px;
}
.refund-4 {
  display: flex;
  flex-wrap: nowrap;
}
.refund-4-1 {
  margin-right: 20px;
  margin-left: 20px;
  font-size: 11px;
}
.refund-4-2 {
  font-size: 11px;
  color: #000000;
}
.refund-5 {
  margin-top: 10px;
  display: flex;
  padding-bottom: 20px;
}
.refund-5-1 {
  width: 50px;
  margin-right: 20px;
  margin-left: 20px;
  font-size: 11px;
}
.refund-6 {
  margin-left: 20px;
  margin-top: 30px;
}
.refund-7 {
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 30px;
}
.gongsi {
  color: #2f80ed;
  text-decoration: none;
}
</style>
